import React,{ Component } from 'react';
import { TimePicker,Form } from 'antd';
const FormItem = Form.Item;
class TimePick extends Component {
	constructor(props) {
		super(props);
		this.state = {
			startValue: '',
			endValue: '',
			endOpen: false,
		}
	}
	//开始时间
	onStartChange=(value)=>{
		//console.log('开始时间的改变：',value);
		this.onChange('startValue',value);
	}
	//结束时间
	onEndChange=(value)=>{
		//console.log('结束时间的改变：',value);
		this.onChange('endValue',value);
	}
	//更新时间
	onChange(field,value) {
		this.setState({
			[field]: value,
		})
	}
	//控制面板是否显示
	handleStartOpenChange=(open)=>{
		if(!open) {
			this.setState({
				endOpen: true,
			})
		}
	}
	handleEndOpenChange=(open)=>{
		this.setState({
			endOpen: open,
		})
	}
	//禁止
	disabledStartHours=(startValue)=> {
		console.log('禁止的开始时间',startValue);
	}
	disabledEndHours=(endValue)=>{
		console.log('禁止的最终时间',endValue);
	}
	render() {
		const { startValue,endValue,endOpen } = this.state;
		const {getFieldDecorator} = this.props.form;
		return (
			<div>
				<FormItem>
					{getFieldDecorator(`conditionDesc`)(
						<TimePicker 
							placeholder="请选择开始时间"
							format="HH:mm:ss"
							onChange= { this.onStartChange }
							value = { startValue }
							onOpenChange = { this.handleStartOpenChange }
							disabledHours= { this.disabledStartHours }
						/>
					)}
				</FormItem>
				<FormItem>
					{getFieldDecorator(`conditionDesc`)(
						<TimePicker 
							placeholder="请选择结束时间"
							format="HH:mm:ss"
							onChange={ this.onEndChange }
							open={ endOpen }
							value ={ endValue }
							onOpenChange={ this.handleEndOpenChange }
							disabledHours= { this.disabledEndHours }
						/>
					)}
				</FormItem>
			</div>
		)
	}
}
//export default TimePick;
export default TimePick = Form.create({})(TimePick);